<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { MessagePlugin } from "tdesign-vue-next";
import { getUuid } from "@/utils/common.methods";
import { ref, defineProps, onMounted, onUpdated } from "vue";
import { noteService } from "@/services/note.service";
defineProps<{ visible: boolean }>();
const emit = defineEmits(["close"]);

const remark = ref("");
const colors = ref(appRef.note.colors);
const bgcolor = ref<string>(appRef.note.colorRandom);

onUpdated(() => {
  bgcolor.value = appRef.note.colorRandom;
  remark.value = "";
});

function onConfirm(): void {
  const str = String(remark.value).replaceAll("\n", "<br>")
  console.log(str);
  if (remark.value) {
    noteService.add(remark.value, bgcolor.value).then(() => {
      emit("close", true);
    });
  } else {
    MessagePlugin.warning("写一点内容先");
  }
}
</script>
<template>
  <t-dialog :visible="visible" header="创建便签" @cancel="emit('close')" @close="emit('close')" @confirm="onConfirm">
    <t-space direction="vertical" size="large" style="width: 100%">
      <t-space direction="vertical" :size="10" style="width: 100%">
        <div class="colors flex">
          <span class="item" @click="bgcolor = item" :class="{ activity: bgcolor == item }" v-for="item in colors"
            :style="{ background: item }"></span>
        </div>
      </t-space>
      <t-space direction="vertical" :size="10" style="width: 100%">
        <span>想写的内容</span>
        <t-textarea placeholder="请输入内容" v-model:value="remark" />
      </t-space>
    </t-space>
  </t-dialog>
</template>
<style lang='scss' scoped>
.colors {
  width: 100%;
  height: 70px;

  .item {
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }

  .activity {
    transform: translateY(-7px);
    border-radius: 3px 3px 0 0;
  }
}
</style>